<template>
    <div class="rightData">
      <!-- <TutoringPlan></TutoringPlan> -->
      <div class="time-selectors">
        <el-select
          v-model="SelectYear"
          style="width: 96px"
          placeholder="Select year"
        >
          <el-option
            v-for="year in years"
            :key="year"
            :label="year"
            :value="year"
          />
        </el-select>
        <el-select
          v-model="SelectMonth"
          style="width: 96px"
          placeholder="选择"
        >
          <el-option
            v-for="month in months"
            :key="month"
            :label="`${month}月`"
            :value="month"
          />
        </el-select>
      </div>
    </div>
  </template>
  
  <script  setup>
  import { ref, computed, watch } from 'vue'
  const SelectYear=ref(new Date().getFullYear())
  const SelectMonth=ref(new Date().getMonth()+1)

  const years = computed(() => {
    const currentYear = new Date().getFullYear()
    const yearArray = []
    for (let year = currentYear; year <= 2099; year++) {
      yearArray.push(year)
    }
    return yearArray
  })

  const months = computed(() => {
    const monthArray = []
    if (SelectYear.value) {
      for (let month = 1; month <= 12; month++) {
        monthArray.push(month)
      }
    }
    return monthArray
  })

const emit = defineEmits([ "handleUpdate" ]);
//   const emits=
// 当月份变化直接提交数据
  


// 计算选中月份的天数和第一天是星期几
const monthDetails = computed(() => {
  if (!SelectYear.value || !SelectMonth.value) return null

  const year = SelectYear.value
  const month = SelectMonth.value
  
  // 获取选中月份的总天数
  const daysInMonth = new Date(year, month, 0).getDate()
  
  // 获取选中月份第一天是星期几（0-6，0代表星期日）
  const firstDayOfWeek = new Date(year, month - 1, 1).getDay()
  const lastDayOfWeek = new Date(year, month, 0).getDay()

  return {
    daysInMonth,
    firstDayOfWeek,
    lastDayOfWeek
  }
})



// 监听月份变化
watch(SelectMonth, (newMonth) => {
  if (newMonth && SelectYear.value) {
    const details = monthDetails.value
    emit('handleUpdate', {
      year: SelectYear.value,
      month: newMonth,
      daysInMonth: details.daysInMonth,
      firstDayOfWeek: details.firstDayOfWeek,
      lastDayOfWeek: details.lastDayOfWeek
    })
  }
},{
    immediate:true
})

  // 监听年份变化，重置月份选择
  watch(SelectYear, () => {
    SelectMonth.value = ''
  })
  </script>
  
  <style>
  .time-selectors {
    display: flex;
    gap: 20px;
  }
  </style>